<!DOCTYPE html>
<html>
 <head> 
  <title></title> 
  <link rel="stylesheet" href="static/global.css" /> 
 </head> 
 <body> 
  <div class="modal-dialog modal-lg"> 
   <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title">登录</h4> 
    </div>
    <div class="modal-body"> 
     <p class="sfModal-content"> </p>
     <div class="row bg-white login-modal"> 
      <div class="col-md-4 col-sm-12 col-md-push-7 login-wrap"> 
       <h1 class="h4 text-muted login-title">用户登录</h1> 
       <form action="/api/user/login" method="POST" role="form" class="mt30"> 
        <div class="form-group"> 
         <label for="username" class="control-label">手机号 或 Email</label> 
         <input class="form-control" name="username" required="" placeholder="11 位手机号 或 Email" autocomplete="off" type="text" /> 
        </div> 
        <div class="form-group"> 
         <label class="control-label">密码</label>
         <span class="pull-right"><a href="/user/forgot">忘记密码</a></span> 
         <input class="form-control" name="password" required="" placeholder="密码" type="password" /> 
        </div> 
        <div class="form-group clearfix"> 
         <div class="checkbox pull-left"> 
          <label><input name="remember" value="1" checked="" type="checkbox" /> 记住登录状态</label> 
         </div> 
         <button type="submit" class="btn btn-primary pull-right pl20 pr20" onclick="ga(&quot;send&quot;, &quot;event&quot;, &quot;email login button&quot;, &quot;clicked&quot;, &quot;login modal&quot;);">登录 </button> 
        </div> 
       </form> 
       <p class="h4 text-muted visible-xs-block h4">快速登录</p> 
       <div class="widget-login mt30"> 
            <p class="text-muted mt5 mr10 pull-left hidden-xs">快速登录</p> 
            <a href="/user/oauth/google" class="" onclick=""></span> <strong class="visible-xs-inline">Google 账号</strong></a> 
            <a href="/user/oauth/github" class="" onclick=""><span class="icon-sn-github"></span> <strong class="visible-xs-inline">Github 账号</strong></a> 
            <a href="/user/oauth/weibo" class="" onclick=""><span class="icon-sn-weibo"></span> <strong class="visible-xs-inline">新浪微博账号</strong></a> 
            <a href="/user/oauth/qq" class="" onclick=""><span class="icon-sn-qq"></span> <strong class="visible-xs-inline">QQ 账号</strong></a> 
            <a href="/user/oauth/weixin" class="" onclick=""><span class="icon-sn-weixin"></span> <strong class="visible-xs-inline">微信账号</strong></a> 
            <a href="/user/oauth/linkedin" class="" onclick=""><span class="icon-sn-linkedin"></span> <strong class="visible-xs-inline">LinkedIn 账号</strong></a> 
            <span id="loginShowMore" style="cursor: pointer" class="mb5"><span class="icon-sn-dotted"></span><strong class="visible-xs-inline">•••</strong></span> 
            <a href="/user/oauth/twitter" class=" hidden" onclick=""><span class="icon-sn-twitter"></span> <strong class="visible-xs-inline">Twitter 账号</strong></a> 
            <a href="/user/oauth/facebook" class=" hidden" onclick=""><span class="icon-sn-facebook"></span> <strong class="visible-xs-inline">Facebook 账号</strong></a> 
            <a href="/user/oauth/douban" class=" hidden" onclick=""><span class="icon-sn-douban"></span> <strong class="visible-xs-inline">豆瓣账号</strong></a> 
           </div> 
      </div> 
      <div class="login-vline hidden-xs hidden-sm"></div> 
      <div class="col-md-4 col-md-pull-3 col-sm-12 login-wrap"> 
       <h1 class="h4 text-muted login-title">注册新账号</h1> 
    

        <div class="form-group"> 
          <div class="mb10"> 
            <label class="radio-inline"> <input name="register_type" value="phone" checked="" type="radio" id="PH" /> 用手机号注册 </label> 
            <label class="radio-inline"> <input name="register_type" value="mail" type="radio" id="EM"/> 用 Email 注册 </label> 
           </div> 
        </div>
      <form action="{:url('Index/phone')}" method="POST" role="form" class="mt30" style="display: block;" id = 'phone'> 
        <div class="form-group js-register-switch-box"> 
            <label for="name" class="control-label">名字</label> 
            <input class="form-control" name="name" required="" placeholder="真实姓名或常用昵称" type="text" />
            <br>
         <div class="js-register-switch-content" > 
          <input class="form-control mb15" name="phone" required="" placeholder="仅支持大陆手机号" autocomplete="off" type="phone" /> 
          <div class="input-group">
           <input name="code" class="form-control js-user-login__phone-code-value" placeholder="短信验证码" type="text" /> 
           <span class="input-group-btn"><button class="btn btn-default js-user-login__phone-vaild-btn" style="width:96px;" type="button">获取验证码</button></span> 
          </div> 
         </div>
          
         
     
        </div> 
        <div class="form-group"> 
         <label for="password" class="control-label">密码</label> 
         <input class="form-control" name="password" required="" placeholder="不少于 6 位" type="password" /> 
        </div> 
        <div class="form-group" style="display:none;"> 
         <label class="required control-label">验证码</label> 
         <input class="form-control" id="captcha" name="captcha" placeholder="请输入下方的验证码" type="text" /> 
         <div class="mt10">
          <a id="loginReloadCaptcha" href="javascript:void(0)"><img data-src="/user/captcha?w=240&amp;h=50" class="captcha" height="50" width="240" /></a> 
         </div> 
        </div> 
        <div class="form-group clearfix"> 
         <div class="checkbox pull-left">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="check">同意并接受
          <a href="/tos" target="_blank">《服务条款》</a> 
         </div> 
         <button type="submit" class="btn btn-primary pl20 pr20 pull-right">注册 </button> 

        </div> 
       </form>
       <form action="{:url('Index/mail')}" method="POST" role="form" class="mt30" style="display: none;" id="mail"> 
        <div class="form-group js-register-switch-box"> 
            <label for="name" class="control-label">名字</label> 
            <input class="form-control" name="name" required="" placeholder="真实姓名或常用昵称" type="text" />
            <br>
          
          <input class="form-control" name="mail" required="" placeholder="hello@segmentfault.com"  type="email" >
     
        </div> 
        <div class="form-group"> 
         <label for="password" class="control-label">密码</label> 
         <input class="form-control" name="password" required="" placeholder="不少于 6 位" type="password" /> 
        </div> 
      
        <div class="form-group clearfix"> 
         <div class="checkbox pull-left">
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="check">同意并接受
          <a href="/tos" target="_blank">《服务条款》</a> 
         </div> 
         <button type="submit" class="btn btn-primary pl20 pr20 pull-right">注册 </button> 

        </div> 
       </form>  
      </div> 
     </div> 
     <div style="position: absolute;transform: scale(0.5,0.5) translate(136%,-114%);"> 
      <img src="https://static.segmentfault.com/v-58fb6746/global/img/fool/login@2x.png" /> 
     </div> 
     <div class="text-center text-muted mt30"> 
     </div> 
     <p></p>
    </div> 
    <div class="modal-footer hidden"></div> 
   </div>   
  </div> 
 </body>
  <script type="text/javascript">
    var EM = document.getElementById("EM");
    var mail = document.getElementById("mail");

    var PH = document.getElementById('PH');
    var phone = document.getElementById('phone');
    
    EM.onclick = function(){
        mail.style.display = "block";
        phone.style.display = "none";
       

    }
     PH.onclick = function(){
       
        mail.style.display = "none";
        phone.style.display = "block";

    }
  </script>
</html>